<template>
	<view class="center">
		<u-navbar title="信息中心" leftIcon=' ' placeholder='true'></u-navbar>

		<u-tabs :list="list1" @click="click" :current='current' lineWidth="50" lineColor="#FF8E53"></u-tabs>
		<view class="message-box">
			<view class="box-item" @click="ongoods" v-for="(item,index) in 6" :key="index">
				<view class="box-user">
					<image :src="imgBaseUrl + '/ache/images/user.png'" class="imga"
						mode=""></image>
				</view>
				<view class="box-right">
					<view class="titile">
						不吃香菜
					</view>
					<view class="text">
						你今天有时间跟我去逛街么？
					</view>
				</view>
				<view class="box-time">
					09-26
				</view>
			</view>

		</view>
		<u-tabbar activeColor="#FF8E53" :value="value1" @change="change1" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="搜索" icon="list-dot" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="消息" icon="chat" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="click1"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				value1: 2,
				current: 2,
				list1: [{
					name: '我发起的',
				}, {
					name: '最新消息',
				}, {
					name: '我关注的',
				}]
			};
		},

		computed: {
			...mapGetters(['imgBaseUrl'])
		},
		methods: {
			click(item) {
				console.log('item', item);
			},
			click1(e) {
				this.value1 = e
				console.log('click1', e);
				if (e == 1) {
					uni.redirectTo({
						url: '/pages/goods-list/index'
					})
				} else if (e == 2) {
					uni.redirectTo({
						url: '/pages/message-list/index'
					})
				} else if (e == 3) {
					uni.redirectTo({
						url: '/pages/user/index'
					})
				} else if (e == 0) {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}
			},
			change1() {},
			//点击
			ongoods(item) {
				uni.navigateTo({
					url: '/pages/message-detail/index'
				});
				console.log(item, '点击了商品，这里要跳转详情页');
			},

		}
	};
</script>
<style lang="scss">
	@import '@/styles/mixin.scss';

	.center {
		min-height: 100%;
		background-color: #fff;

		.message-box {
			padding: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.box-item {
				padding-top: 20rpx;
				display: flex;
				align-items: center;
				position: relative;

				.box-user {
					padding-right: 20rpx;

					.imga {
						border-radius: 50%;
						width: 100rpx;
						height: 100rpx;
						// background-color: black;
					}
				}

				.box-right {
					.titile {
						font-size: 32rpx;
						font-weight: bold;
					}

					.text {
						font-size: 26rpx;
						padding-top: 20rpx;
					}
				}

				.box-time {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
				}
			}

		}
	}
</style>